<template>
  <div class="documents-container">
    <div class="documents-toolbar">
      <el-button type="primary" size="small" @click="openUploadDialog">
        <el-icon><Upload /></el-icon>
        上传文档
      </el-button>
    </div>

    <div v-if="documents.length > 0" class="documents-cards">
      <el-card v-for="doc in documents" :key="doc.id" class="document-card" shadow="hover">
        <div class="document-card-header">
          <div class="document-info">
            <h4 class="document-title">{{ doc.title }}</h4>
            <div class="document-meta">
              <span class="doc-type">{{ doc.doc_type_name || '文档' }}</span>
              <span class="upload-user">上传人：{{ doc.upload_user || '未知' }}</span>
              <span class="create-time">创建时间：{{ formatTime(doc.create_time) }}</span>
            </div>
          </div>
          <el-button
            type="text"
            danger
            size="small"
            @click="deleteCaseDocument(doc)"
            class="delete-card-btn"
          >
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </div>

        <div class="files-list">
          <div v-if="docFilesMap[doc.id] && docFilesMap[doc.id].length > 0" class="files-content">
            <div v-for="file in docFilesMap[doc.id]" :key="file.id" class="file-item">
              <div class="file-info">
                <el-icon class="file-icon"><Document /></el-icon>
                <div class="file-details">
                  <span class="file-name" :title="file.name">{{ file.name }}</span>
                  <span class="file-size">{{ formatFileSize(file.filesize) }}</span>
                </div>
              </div>
              <div class="file-actions">
                <el-button type="text" size="small" @click="downloadFileById(file.id, file.name)">
                  <el-icon><Download /></el-icon>
                  下载
                </el-button>
                <el-button type="text" size="small" danger @click="deleteFileById(file.id, doc.id)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </div>
          </div>
          <div v-else class="files-loading">
            <el-empty description="暂无文件" :image-size="50" />
          </div>
        </div>
      </el-card>
    </div>

    <div v-else class="documents-empty">
      <el-empty description="暂无相关文档" :image-size="100" />
    </div>
  </div>

  <!-- 上传文档弹窗 -->
  <el-dialog
    v-model="uploadDialogVisible"
    title="上传案件文档"
    width="700px"
    :before-close="closeUploadDialog"
  >
    <el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-width="100px">
      <el-form-item label="关联案件" prop="case_id">
        <el-input v-model="uploadForm.case_id" disabled />
      </el-form-item>
      <el-form-item label="文档名称" prop="title">
        <el-input v-model="uploadForm.title" placeholder="请输入文档名称" />
      </el-form-item>
      <el-form-item label="文档类型" prop="doc_type">
        <el-select
          v-model="uploadForm.doc_type"
          placeholder="请选择文档类型"
          :loading="docTypesLoading"
        >
          <template v-if="!docTypesLoading && docTypeOptions.length === 0">
            <el-option disabled value="">暂无文档类型数据</el-option>
          </template>
          <el-option
            v-for="option in docTypeOptions"
            :key="option.id"
            :label="option.name"
            :value="option.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上传文件">
        <el-upload
          :action="config.API_BASE_URL + '/api/home/files/upload'"
          :file-list="uploadForm.fileList"
          :before-upload="beforeUpload"
          :on-remove="handleFileRemove"
          :on-success="handleFileUploadSuccess"
          :on-error="handleFileUploadError"
          :auto-upload="true"
          :with-credentials="true"
          multiple
          :limit="5"
          :show-file-list="true"
          :drag="false"
          :name="'file'"
          accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.jpg,.jpeg,.png,.gif"
        >
          <el-button type="primary" size="small">
            <el-icon><Upload /></el-icon>
            选择文件
          </el-button>
          <template #tip>
            <div class="el-upload__tip">
              支持PDF、Word、Excel等格式，单个文件不超过10MB，最多上传5个文件
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeUploadDialog">取消</el-button>
        <el-button type="primary" @click="submitUploadForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, watch } from 'vue'
  import {
    ElMessage,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElUpload,
    ElButton,
    ElIcon,
  } from 'element-plus'
  import { Upload, Download, Delete, Document, Plus, Close } from '@element-plus/icons-vue'
  import { useLawcaseStore } from '@/store/lawcase'
  import type { CaseDoc } from '@/types/lawcase'
  import type { ApiResponse } from '@/types/api'
  import { downloadFile } from '@/utils/common'
  import request from '@/utils/request'
  import { getPublicFileDetail } from '@/api/home/files'
  import config from '@/config/index'
  import { uploadCaseDoc } from '@/services/lawcase'

  // defineProps 和 defineEmits 是编译器宏，不需要导入
  const props = defineProps<{
    caseId: number | string
    formatTime: (time: number | string, format?: 'date' | 'datetime' | 'time') => string
  }>()

  const emit = defineEmits(['refresh-documents'])

  const lawcaseStore = useLawcaseStore()
  const documents = ref<CaseDoc[]>([])
  // 存储案件文档对应的文件列表，key为文档ID，value为文件列表
  const docFilesMap = ref<Record<number, any[]>>({})
  // 存储文件加载状态，key为文档ID
  const filesLoadingMap = ref<Record<number, boolean>>({})

  // 上传弹窗相关状态
  const uploadDialogVisible = ref(false)
  const uploadForm = ref({
    case_id: Number(props.caseId),
    title: '',
    doc_type: undefined,
    file_ids: '',
    fileList: [] as any[],
  })
  const uploadFormRef = ref()
  const uploadRules = {
    title: [{ required: true, message: '请输入文档名称', trigger: 'blur' }],
    doc_type: [{ required: true, message: '请选择文档类型', trigger: 'change' }],
  }

  // 使用computed属性确保响应式获取文档类型列表
  const docTypeOptions = computed(() => lawcaseStore.docTypes || [])

  // 文档类型加载状态
  const docTypesLoading = ref(false)

  // 由于现在使用自动上传，不需要自定义HTTP请求处理函数，直接使用el-upload的默认功能
  // 相关处理逻辑已在handleFileUploadSuccess和handleFileUploadError中实现

  // 格式化文件大小
  const formatFileSize = (bytes: any): string => {
    // 确保bytes是有效数字
    const numBytes = Number(bytes)
    if (isNaN(numBytes) || numBytes === 0) return '0 Bytes'

    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(numBytes) / Math.log(k))
    return parseFloat((numBytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  // 根据文档ID获取文件列表
  const loadFilesByDocId = async (docId: number, fileIds: string) => {
    // 如果文件已经加载过，则不再重复加载
    if (docFilesMap.value[docId] && docFilesMap.value[docId].length > 0) {
      return
    }

    // 标记为加载中
    filesLoadingMap.value[docId] = true

    try {
      // 解析file_ids字符串为数组
      const fileIdsArray = fileIds.split(',').filter(id => id.trim() !== '')

      if (fileIdsArray.length === 0) {
        docFilesMap.value[docId] = []
        return
      }

      // 批量获取文件详情（使用公开接口，不验证用户权限）
      const filePromises = fileIdsArray.map(id => getPublicFileDetail(Number(id)))
      const fileResults = await Promise.allSettled(filePromises)

      // 处理获取成功的文件
      const files = fileResults
        .filter(
          result =>
            result.status === 'fulfilled' &&
            (result as PromiseFulfilledResult<any>).value.code === 0 &&
            (result as PromiseFulfilledResult<any>).value.data
        )
        .map(result => (result as PromiseFulfilledResult<any>).value.data)

      docFilesMap.value[docId] = files
    } catch (error) {
      console.error(`获取文档ID为${docId}的文件列表失败:`, error)
      docFilesMap.value[docId] = []
    } finally {
      filesLoadingMap.value[docId] = false
    }
  }

  // 打开上传弹窗
  const openUploadDialog = async () => {
    // 重置表单
    uploadForm.value = {
      case_id: Number(props.caseId),
      title: '',
      doc_type: undefined,
      file_ids: '',
      fileList: [],
    }

    // 如果文档类型列表为空，尝试重新加载
    if (!lawcaseStore.docTypes || lawcaseStore.docTypes.length === 0) {
      docTypesLoading.value = true
      try {
        const res = await lawcaseStore.getDocTypeListAction()
        if (res.code === 0) {
          lawcaseStore.docTypes = res.data
        }
      } catch (error) {
        console.error('获取文档类型失败:', error)
        ElMessage.error('获取文档类型失败，请稍后重试')
      } finally {
        docTypesLoading.value = false
      }
    }

    // 如果有文档类型，设置默认值
    if (lawcaseStore.docTypes && lawcaseStore.docTypes.length > 0) {
      uploadForm.value.doc_type = lawcaseStore.docTypes[0].id
    }

    uploadDialogVisible.value = true
  }

  // 关闭上传弹窗
  const closeUploadDialog = () => {
    uploadDialogVisible.value = false
  }

  // 上传前检查
  const beforeUpload = (file: File): boolean => {
    const isLt10M = file.size / 1024 / 1024 < 10
    if (!isLt10M) {
      ElMessage.error('上传文件大小不能超过 10MB!')
      return false
    }

    // 检查文件类型
    const fileExtension = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
    const allowedExtensions = [
      'pdf',
      'doc',
      'docx',
      'xls',
      'xlsx',
      'txt',
      'jpg',
      'jpeg',
      'png',
      'gif',
    ]

    if (!allowedExtensions.includes(fileExtension)) {
      ElMessage.error('不支持的文件类型，请上传PDF、Word、Excel、文本或图片文件')
      return false
    }

    return true
  }

  // 处理文件上传成功
  const handleFileUploadSuccess = (response: any, file: any, fileList: any[]) => {
    console.log('文件上传成功:', response)
    if (response && response.code === 0 && response.data && response.data.id) {
      // 将文件ID添加到表单中
      if (uploadForm.value.file_ids) {
        uploadForm.value.file_ids += ',' + response.data.id
      } else {
        uploadForm.value.file_ids = response.data.id.toString()
      }

      // 更新文件列表
      uploadForm.value.fileList = fileList
    } else {
      ElMessage.error('文件上传失败: ' + (response.msg || '未知错误'))
      // 移除上传失败的文件
      uploadForm.value.fileList = fileList.filter(f => f.uid !== file.uid)
    }
  }

  // 处理文件上传错误
  const handleFileUploadError = (err: any, uploadFile: any, fileList: any[]) => {
    console.error('文件上传失败:', err)
    let errorMessage = '文件上传失败'
    if (err.response) {
      errorMessage += ': ' + (err.response.data?.msg || err.response.statusText || '服务器错误')
    } else if (err.request) {
      errorMessage += ': 网络错误或服务器无响应'
    } else if (err.message) {
      errorMessage += ': ' + err.message
    }

    ElMessage.error(errorMessage)
    // 移除上传失败的文件
    uploadForm.value.fileList = fileList.filter(f => f.uid !== uploadFile.uid)
  }

  // 处理文件移除
  const handleFileRemove = (file: any, fileList: any[]) => {
    // 从file_ids中移除对应的文件ID
    if (file.response && file.response.data && file.response.data.id) {
      const fileId = file.response.data.id
      const fileIds = uploadForm.value.file_ids.split(',')
      const index = fileIds.indexOf(fileId.toString())
      if (index > -1) {
        fileIds.splice(index, 1)
        uploadForm.value.file_ids = fileIds.join(',')
      }
    } else if (file.uid) {
      // 如果文件还没有上传成功，从fileList中找到对应的文件
      const index = uploadForm.value.fileList.findIndex((f: any) => f.uid === file.uid)
      if (index > -1) {
        uploadForm.value.fileList.splice(index, 1)
      }
    }
    uploadForm.value.fileList = fileList
  }

  // 下载已上传的文件
  const downloadUploadedFile = async (file: any) => {
    try {
      // 检查文件是否有ID
      if (file.response && file.response.data && file.response.data.id) {
        const fileId = file.response.data.id
        const fileName = file.name

        // 使用现有的downloadFileById函数下载文件
        await downloadFileById(fileId, fileName)
      } else {
        ElMessage.error('无法下载文件：文件信息不完整')
      }
    } catch (error) {
      console.error('文件下载失败:', error)
      ElMessage.error('文件下载失败')
    }
  }

  // 提交上传表单 - 现在只提交文档信息，文件已经在选择时上传完成
  const submitUploadForm = async () => {
    try {
      // 验证表单
      await uploadFormRef.value.validate()

      // 检查是否有上传的文件且文件ID不为空
      if (!uploadForm.value.file_ids) {
        ElMessage.error('请先选择并等待文件上传完成')
        return
      }

      // 构建表单数据，使用lawcase.ts中定义的uploadCaseDoc函数
      const formData = new FormData()
      formData.append('case_id', uploadForm.value.case_id.toString())
      formData.append('title', uploadForm.value.title)
      formData.append('doc_type', String(uploadForm.value.doc_type))
      formData.append('file_ids', uploadForm.value.file_ids)

      console.log('准备提交文档数据:', {
        case_id: uploadForm.value.case_id,
        title: uploadForm.value.title,
        doc_type: uploadForm.value.doc_type,
        file_ids: uploadForm.value.file_ids,
      })

      // 使用lawcase.ts中定义的uploadCaseDoc函数提交表单数据
      const response: ApiResponse<any> = await uploadCaseDoc(formData)

      console.log('文档上传响应:', response)

      if (response && response.code === 0) {
        ElMessage.success('文档上传成功')
        closeUploadDialog()
        refreshDocuments()
      } else {
        const errorMsg = (response && response.msg) || '文档上传失败'
        ElMessage.error(errorMsg)
      }
    } catch (error: any) {
      console.error('文档上传失败:', error)
      // 更详细的错误信息
      if (error.response) {
        // 服务器返回了错误响应
        console.error('服务器响应:', error.response)
        ElMessage.error(
          `文档上传失败: ${error.response.data?.msg || error.response.statusText || '服务器错误'}`
        )
      } else if (error.request) {
        // 请求已发出但没有收到响应
        console.error('请求信息:', error.request)
        ElMessage.error('文档上传失败: 网络错误或服务器无响应')
      } else {
        // 其他错误
        console.error('错误信息:', error.message)
        ElMessage.error(`文档上传失败: ${error.message}`)
      }
    }
  }

  // 根据文件ID下载文件
  const downloadFileById = async (fileId: number, fileName: string) => {
    try {
      // 使用正确的文件ID调用下载接口
      const response: any = await request({
        url: '/api/lawcase/casedocs/download',
        method: 'get',
        params: { file_id: fileId },
        responseType: 'blob',
      })

      // 检查响应是否是有效的Blob对象且不是JSON错误
      if (response && response.data && response.data instanceof Blob) {
        // 检查Blob大小是否很小，可能是错误信息
        if (response.data.size < 1000 && response.data.type.includes('json')) {
          // 尝试将Blob转换为JSON以获取错误信息
          const text = await new Response(response.data).text()
          try {
            const errorData = JSON.parse(text)
            throw new Error(errorData.msg || '文件下载失败')
          } catch (jsonError) {
            // 如果解析JSON失败，继续处理为正常文件
            downloadFile(response.data, fileName)
            ElMessage.success('文件下载成功')
          }
        } else {
          // 正常文件下载流程
          downloadFile(response.data, fileName)
          ElMessage.success('文件下载成功')
        }
      } else {
        throw new Error('无效的文件数据')
      }
    } catch (error) {
      console.error('文件下载失败:', error)
      ElMessage.error(error instanceof Error ? error.message : '文件下载失败')
    }
  }

  // 删除单个文件（文件级删除）
  const deleteFileById = async (fileId: number, docId: number) => {
    try {
      // 调用文件删除API - 使用RESTful风格的URL路径参数
      await request.delete(`/api/home/files/del/${fileId}`)

      // 获取文档信息，更新file_ids字段
      const doc = documents.value.find(d => d.id === docId)
      if (doc && doc.file_ids) {
        // 从file_ids中移除已删除的文件ID
        const fileIdsArray = doc.file_ids
          .split(',')
          .filter(id => id.trim() !== '' && parseInt(id) !== fileId)
        const updatedFileIds = fileIdsArray.join(',')

        if (updatedFileIds === '') {
          // 如果file_ids为空，则软删除该文档
          await request.delete('/api/lawcase/casedocs/del', {
            data: { id: docId },
          })
          ElMessage.success('文件删除成功，且文档已被软删除（无关联文件）')
          refreshDocuments()
        } else {
          // 调用编辑文档API，更新file_ids字段
          await request.put('/api/lawcase/casedocs/edit', {
            id: docId,
            title: doc.title,
            doc_type: doc.doc_type,
            file_ids: updatedFileIds,
          })

          // 完全重载卡片信息和文件列表
          refreshDocuments()
          ElMessage.success('文件删除成功')
        }
      } else {
        ElMessage.success('文件删除成功')
      }
    } catch (error) {
      console.error('文件删除失败:', error)
      ElMessage.error('文件删除失败')
    }
  }

  // 删除案件文档（卡片级删除）
  const deleteCaseDocument = async (doc: CaseDoc) => {
    try {
      // 调用API删除文档关联
      await request.delete('/api/lawcase/casedocs/del', {
        data: { id: doc.id },
      })

      // 如果有file_ids，也删除对应的文件记录
      if (doc.file_ids) {
        const fileIdsArray = doc.file_ids.split(',').filter(id => id.trim() !== '')
        if (fileIdsArray.length > 0) {
          try {
            // 循环删除每个文件（后端接口只支持单个文件删除）
            for (const fileId of fileIdsArray) {
              try {
                await request.delete(`/api/home/files/del/${fileId}`)
              } catch (singleFileError) {
                console.error(`删除文件ID ${fileId} 失败:`, singleFileError)
                // 继续删除下一个文件
              }
            }
          } catch (fileError) {
            console.error('删除关联文件过程中发生错误:', fileError)
            // 继续执行，因为文档删除已经成功
          }
        }
      }

      ElMessage.success('文档已删除')
      refreshDocuments()
    } catch (error) {
      console.error('删除文档失败:', error)
      ElMessage.error('文档删除失败')
    }
  }

  // 刷新文档列表
  const refreshDocuments = async () => {
    try {
      // 显式地等待API调用完成并更新store
      const response = await lawcaseStore.getCaseDocListAction({
        case_id: props.caseId,
      })

      // 确保从store获取最新数据
      documents.value = lawcaseStore.caseDocs

      // 清空文件映射和加载状态
      docFilesMap.value = {}
      filesLoadingMap.value = {}

      // 为每个文档加载文件列表
      documents.value.forEach(doc => {
        if (doc.file_ids) {
          loadFilesByDocId(doc.id, doc.file_ids)
        }
      })

      // 触发父组件的刷新事件，确保整个页面都能正确更新
      emit('refresh-documents')
    } catch (error) {
      console.error('刷新文档列表失败:', error)
      ElMessage.error('刷新文档列表失败')
    }
  }

  // 监听案件ID变化
  watch(
    () => props.caseId,
    () => {
      refreshDocuments()
    }
  )

  // 组件挂载时加载文档列表和文档类型
  onMounted(async () => {
    refreshDocuments()
    loadDocTypes()
  })

  // 加载文档类型列表的函数
  const loadDocTypes = async () => {
    if (!lawcaseStore.docTypes || lawcaseStore.docTypes.length === 0) {
      docTypesLoading.value = true
      try {
        await lawcaseStore.getDocTypeListAction()
        // 如果API返回空数据，显示友好提示
        if (!lawcaseStore.docTypes || lawcaseStore.docTypes.length === 0) {
          console.warn('文档类型列表为空')
        }
      } catch (error) {
        console.error('获取文档类型失败:', error)
        ElMessage.error('获取文档类型失败，您可以继续操作，文档类型将显示为空')
      } finally {
        docTypesLoading.value = false
      }
    }
  }
</script>

<style scoped>
  .documents-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .documents-toolbar {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
  }

  .documents-cards {
    flex: 1;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
  }

  .document-card {
    display: flex;
    flex-direction: column;
    height: fit-content;
    transition: all 0.3s ease;
  }

  .document-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .document-info {
    flex: 1;
    margin-right: 12px;
  }

  .document-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .document-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #909399;
  }

  .doc-type {
    background-color: #ecf5ff;
    color: #409eff;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .delete-card-btn {
    padding: 4px;
  }

  .files-list {
    margin-top: 8px;
  }

  .files-content {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
  }

  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f5f7fa;
  }

  .file-item:last-child {
    border-bottom: none;
  }

  .file-info {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
  }

  .file-icon {
    color: #409eff;
    font-size: 16px;
  }

  .file-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .file-name {
    font-size: 14px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
    cursor: help;
  }

  .file-size {
    font-size: 12px;
    color: #909399;
  }

  .file-actions {
    display: flex;
    gap: 8px;
  }

  .files-loading {
    text-align: center;
    padding: 20px 0;
    color: #909399;
  }

  .documents-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
  }
  /* 自定义上传组件样式，解决文件名过长问题 */
  :deep(.el-upload-list__item) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
  }

  :deep(.el-upload-list__item-name) {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }

  /* 确保操作按钮始终可见 */
  :deep(.el-upload-list__item-actions) {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
  }

  /* 鼠标悬停时显示完整文件名 */
  :deep(.el-upload-list__item-name):hover {
    text-overflow: unset;
    white-space: normal;
    word-break: break-all;
    position: relative;
    z-index: 10;
    background-color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 500px;
  }

  /* 自定义文件列表样式 */
  .custom-upload-list {
    margin-top: 10px;
  }

  .custom-upload-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #f5f7fa;
  }

  .custom-upload-item:last-child {
    border-bottom: none;
  }

  .custom-upload-item .file-info {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 8px;
  }

  .custom-upload-item .file-icon {
    color: #409eff;
    font-size: 16px;
  }

  .custom-upload-item .file-name {
    font-size: 14px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
    cursor: help;
  }

  .custom-upload-item .file-name:hover {
    text-overflow: unset;
    white-space: normal;
    word-break: break-all;
    position: relative;
    z-index: 10;
    background-color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    max-width: 500px;
  }

  .custom-upload-item .success-icon {
    color: #67c23a;
    margin-left: 5px;
  }

  .custom-upload-item .error-icon {
    color: #f56c6c;
    margin-left: 5px;
  }

  .custom-upload-item .file-actions {
    display: flex;
    gap: 8px;
  }
</style>
